<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邮箱注册</title>
</head>
<style>
    .d1 {
        width: 710px;
        height: 550px;
        border: 2px solid orange;
        margin: 50px auto;
    }

    div ul li input {
        text-indent: 50px;
    }

    div ul li .l1 {
        background-image: url("../fudongimage/login-input5.png");
        background-repeat: no-repeat;
        width: 350px;
        height: 50px;
        background-position: left 15px bottom 20px;
        color: gray;
    }

    div ul li .l2 {
        background-image: url("../fudongimage/login-input1.png");
        background-repeat: no-repeat;
        width: 350px;
        height: 50px;
        background-position: left 15px bottom 20px;
        color: gray;
    }

    div ul li .l3, .l4 {
        background-image: url("../fudongimage/login-input2.png");
        background-repeat: no-repeat;
        width: 350px;
        height: 50px;
        background-position: left 15px bottom 20px;
        color: gray;
    }

    div ul li .l5 {
        background-image: url("../fudongimage/login-input3.png");
        background-repeat: no-repeat;
        width: 350px;
        height: 50px;
        background-position: left 15px bottom 20px;
        color: gray;
    }

    div ul li {
        margin: 20px;
        color: gray;
    }

    div ul li .sp1 {
        color: red;
    }

    .d1 .p1 {
        margin-right: 210px;
        text-align: center;
    }

    .d1 .d2 .i1 {
        width: 214px;
        height: 43px;
        background-color: deepskyblue;

        color: white;
        margin-left: 110px;
    }

    .img1 {
        height: 50px;
        position: relative;
        top: 20px;
    }
</style>
<body>
<div class="d1">
    <ul type="none" class="u1">
        <li><input type="text" value="请输入您常用地邮箱" class="l1">请输入您常用的邮箱</li>
        <li><input type="text" value="请输入昵称" class="l2">4-12位字符、英文、数字或者中文均可</li>
        <li><input type="text" value="请输入密码" class="l3">6-16位字符或数字、字母，区分大小写</li>
        <li><input type="text" value="请再次输入密码" class="l4"></li>
        <li><input type="text" value="请输入右侧验证码" class="l5"><img src="../fudongimage/yanzhengma.png" class="img1"><span
                class="sp1">验证码不能为空</span></li>
    </ul>
    <p class="p1">
        <input type="checkbox">同意<a href="#" style="color:deepskyblue">用户服务条款</a>
    </p>
    <div class="d2">
        <input type="submit" value="注册" class="i1">
    </div>
</div>
</body>
</html>